<template>
  <div class="PositionDetails">
    <Header />
    <div class="job-banner">
      <div class="job-banner-content">
        <div class="content-left">
          <div class="job-status"><span>招聘中</span></div>
          <div class="job-name">
            <h1>{{jobDetailsData.jobName}}</h1>
            <span class="job-salary">{{jobDetailsData.salaryDesc}}</span>
          </div>
          <p>
            <a class="text-city" href="###">{{jobDetailsData.cityName}}</a
            ><em class="dolt"></em>{{jobDetailsData.jobExperience}}<em class="dolt"></em>{{jobDetailsData.jobDegree}}
          </p>
          <div class="tag-container">
            <div class="tag-more" style="opacity: 1">
              <span class="link-more">...</span>
              <!-- <div class="tag-all job-tags">
                <span>免费班车</span>
                <span>餐补</span>
                <span>通讯补贴</span>
                <span>交通补助</span>
              </div> -->
            </div>
            <div class="job-tags">
              <span v-for="(item, index1) in welfareList" :key="index1">{{item}}</span>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div class="content-right-btn">立即沟通</div>
          <div class="content-right-btn" @click="getSendResume">投递简历</div>
          <div class="content-right-text">
            <a href="#" class="onea">完善在线简历</a>
            <a href="#">新增附件简历</a>
          </div>
        </div>
      </div>
    </div>
    <div class="job-content">
      <div class="job-content-left">
        <div class="detail-top">
          <div class="detail-figure">
            <img
              :src="jobDetailsData.bossAvatar"
            />
          </div>
          <h2 class="detail-job-name">{{jobDetailsData.bossName}}</h2>
          <p class="gray">{{jobDetailsData.bossTitle}}<em class="vdot">·</em>刚刚在线</p>
        </div>
        <div class="detail-content">
          <div class="job-sec">
            <h3>职位描述</h3>
            <div class="job-sec-identify"></div>
            <div class="text">
              职位描述：<br />1、负责公司产品的迭代开发；<br />2、负责官网、API
              及管理后台相关功能迭代开发；<br />任职要求：<br />1、本科或以上学历，计算机相关专业；<br />2、熟练掌握
              HTML/CSS3/Javascript 等前端技术;<br />3、熟悉至少一种主流 JS
              框架(Vue/React);<br />加分项：<br />熟悉 Electron-vue, 基于
              Electron 做过客户端优先<br />熟悉 VueJS 的 JSX 用法，封装过 Vue
              组件优先<br />熟悉
              Nuxt,NestJS,Mongodb，独立做过完整的中后台管理系统者优先
            </div>
          </div>
        </div>
      </div>
      <div class="job-content-right">
        <div class="sider-company">
          <p class="title">公司基本信息</p>
          <div class="company-info">
              <img
                :src="jobDetailsData.brandLogo"
              />
            <a>{{jobDetailsData.brandName}}</a>
          </div>
          <p><i class="icon-stage"></i>{{jobDetailsData.brandStageName}}</p>
          <p><i class="icon-scale"></i>{{jobDetailsData.brandScaleName}}</p>
          <p>
            <i class="icon-industry"></i>
            <a>{{jobDetailsData.brandIndustry}}</a>
          </p>
          <p class="gray">更新于：2021-04-30</p>
        </div>
      </div>
    </div>
    <!-- <el-button type="text" @click="open">点击打开 Message Box</el-button> -->
  </div>
</template>

<script>
import Header from '../components/Header/index'
export default {
  name: 'PositionDetails',
  components: {
    Header,
  },
  data() {
    return {
      jobDetailsData: {},
      welfareList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getJobDetail()
  },
  mounted() {},
  methods: {
    // 职位详情信息
    getJobDetail() {
      // let jobId = this.$route.query.jobId
      // console.log(jobId);
      // let jobDetailsData = JSON.parse(this.$route.query.jobDetailsData)
      let jobDetailsData = JSON.parse(sessionStorage.getItem('jobDetail'))
      // console.log(jobDetailsData)
      this.jobDetailsData = jobDetailsData
      if (jobDetailsData.welfareList) {
        this.welfareList = jobDetailsData.welfareList
      } else {
        this.welfareList = [ "通讯补贴", "交通补助", "免费班车", "餐补" ]
      }
    },
    // 投递简历按钮
    getSendResume() {
      // console.log(this.jobDetailsData.jobName, this.jobDetailsData.brandName);
      this.$confirm('确定投递该简历?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.$on('rimgUrl', (imgUrl) => {
          //   console.log(imgUrl);
          // })
          // console.log(sessionStorage.getItem('rimgUrl'));
          // const rimgUrl = 'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/' + sessionStorage.getItem('rimgUrl')
          const rimgUrl = sessionStorage.getItem('rimgUrl')
          const data = {
            rcompanyName: this.jobDetailsData.brandName,
            rinfo: this.jobDetailsData.salaryDesc,
            rjobName: this.jobDetailsData.jobName,
            rimgUrl: rimgUrl,
            ruserName: JSON.parse(sessionStorage.getItem('userMessage')).uname,
            ruserPhone: JSON.parse(sessionStorage.getItem('userMessage')).uphone
          }
          this.$request.post('/api/api/Resume/Add',data)
          .then(res => {
            // console.log(res);
          })
          this.$message({
            type: 'success',
            message: '简历投递成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    }
  },
}
</script>
<style scoped>
.PositionDetails {
  width: 100%;
  height: 100%;
}
.job-banner {
  background: #444c60 url('../assets/image/detail-bg.jpg') center center
    no-repeat;
  /* height: 204px; */
  color: #fff;
  padding: 20px 0;
  margin-bottom: 30px;
}
.job-banner-content {
  width: 1184px;
  border: none;
  height: auto;
  padding: 0;
  margin: 0 auto;
  position: relative;
}
.content-left {
  width: 650px;
}
.job-status {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 20px;
}
.job-status span {
  vertical-align: middle;
}
.job-name {
  font-size: 32px;
  line-height: 45px;
  padding: 11px 0 8px;
}
.job-name h1 {
  vertical-align: middle;
  font-size: 32px;
  max-width: 380px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.job-salary {
  display: inline-block;
  vertical-align: middle;
  color: #fa6a43;
  height: 42px;
  font-size: 30px;
  line-height: 42px;
  font-weight: 600;
}
.content-left p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}
.text-city {
  color: rgba(255, 255, 255, 0.7);
}
.dolt {
  display: inline-block;
  vertical-align: middle;
  width: 2px;
  height: 2px;
  margin: 0 7px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
}
.tag-container {
  line-height: 0;
}
.tag-container .tag-more {
  opacity: 0;
  height: 23px;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 8px;
  line-height: 16px;
  display: none;
}
.tag-container .tag-more .link-more {
  line-height: 16px;
}
.job-banner .info-primary .job-tags {
  padding-top: 8px;
  height: 27px;
  overflow: hidden;
  display: inline-block;
}
.job-tags span {
  display: inline-block;
  padding: 0 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #5ed5c8;
  color: #5ed5c8;
  height: 23px;
  line-height: 23px;
  border-radius: 13px;
  margin-top: 0;
  vertical-align: top;
}
.content-right {
  width: 298px;
  position: absolute;
  right: 0;
  top: 50%;
  bottom: 0;
  margin-top: -47px;
}
.content-right-btn {
  width: 296px;
  margin-top: 0;
  margin-bottom: 10px;
  float: none;
  display: inline-block;
  min-width: 112px;
  box-sizing: content-box;
  height: 45px;
  line-height: 45px;
  border: 1px #5dd5c8 solid;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  background: #5dd5c8;
  text-align: center;
  cursor: pointer;
}
.content-right-text {
  width: 50px;
  height: 0;
  /* overflow: hidden; */
  position: absolute;
  bottom: 10px;
  width: 100%;
}
.content-right a {
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  color: #5ed5c8;
}
.onea {
  margin-right: 100px;
}
/* 职位详情内容star */
.job-content {
  width: 1184px;
  /* height: 300px; */
  margin: auto;
}
.job-content-left {
  /* position: relative; */
  padding-right: 25px;
  border-right: 1px #f5f7f9 solid;
  margin-right: 322px;
  padding-bottom: 45px;
  min-height: 613px;
  float: left;
}
.detail-top {
  float: left;
  width: 100%;
  padding-top: 0;
  margin-bottom: 10px;
}
.detail-figure {
  float: left;
  position: static;
}
.detail-figure img {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  vertical-align: top;
  margin-right: 20px;
  border: none;
}
.detail-job-name {
  font-size: 20px;
  color: #424a5e;
  font-weight: 400;
  margin-top: 5px;
}
.gray {
  color: #9fa3af;
  margin-top: 10px;
}
.vdot {
  display: inline-block;
  padding: 0 10px 0 7px;
}
.detail-content {
  clear: left;
}
.job-sec {
  position: relative;
}
.job-sec h3 {
  font-weight: 700;
  font-size: 15px;
  color: #424a5e;
}
.job-sec-identify {
  width: 20px;
  height: 3px;
  background-color: #00d7c6;
  margin: 10px 0;
}
.detail-content .text {
  word-break: break-all;
  word-wrap: break-word;
  color: #61687c;
  line-height: 36px;
}

.job-content-right {
  float: right;
  width: 284px;
  padding-bottom: 40px;
}
.company-info img{
  width: 100px;
  height: 100px;
}
.company-info a{
  display: block;
  margin: -60px 0 50px 120px;
}

.sider-company .title {
  line-height: 25px;
  margin-bottom: 25px;
  font-size: 15px;
  font-weight: 500;
  color: #414a60;
}
.sider-company p {
  line-height: 20px;
  margin-bottom: 26px;
}
.sider-company p .icon-stage {
  width: 15px;
  background: url('../assets/image/icon-stage.png') center center no-repeat;
  background-size: contain;
}
.sider-company p .icon-scale {
  background: url('../assets/image/icon-scale.png') center center no-repeat;
  background-size: contain;
}
.sider-company p .icon-industry {
  background: url('../assets/image/icon-industry.png') center center no-repeat;
  background-size: contain;
}
.sider-company p a {
  text-decoration: none;
  color: #414a60;
}
.sider-company p.gray {
  color: #d0d4da;
}
/* 职位详情内容end */
</style>